/* eslint-disable react-hooks/exhaustive-deps */
import React, { useEffect, useState } from 'react';
import AMapLoader from '@amap/amap-jsapi-loader';
import { message } from 'antd';
type Props = {
    position?: number[]
    clickMarker?: <T>(e: T) => void
    clickHandler?: <T>(e: T) => void

}
function IvMap(props: Props) {
    const [position, setPosition] = useState(props.position)
    const [amap, setamap] = useState(null)
    const [AMap, setAMap] = useState(null)
    const [isGX, setisGX] = useState(true)
    const [pixel, setpixel] = useState()
    useEffect(() => {
        initMap()
    }, []);
    useEffect(() => {
        // 先设置AMap后再设置amap
        // AMap是否初始化 是否是第一次初始化
        if (AMap && isGX) {
            // 是的话则走里面
            mapContainer()
            // 是的话则走里面
            if (!position) {
                positioning()

            }
            // 初始化完毕后则不需要再进行操作
            setisGX(false)

        }

    }, [amap, AMap]);
    useEffect(() => {
        if(amap) {
            
            // 绑定事件
            amap.on('click', clickHandler);
        }
        if (position && amap) {

            setMarker(position)
            // 绑定事件
            amap.on('click', clickHandler);
        }

    }, [position, amap]);
    function clickHandler(e) {
        if (props.clickHandler) {
            props.clickHandler(e)
        }

    }
    //   初始化地图
    function initMap() {
        AMapLoader.load({
            "key": "aa88c5cd817f5d2073b14f88dacb25ce",   // 申请好的Web端开发者Key，首次调用 load 时必填
            "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            "plugins": []  //插件列表
        }).then(async (AMaps) => {
            setAMap(() => AMaps)

        }).catch(e => {
        })
    }
    // 设置中心点
    function mapContainer() {
        let amap = new AMap.Map('mapContainer', { // mapcontainer为容器的id
            zoom: 15, //初始化地图层级
            center: position //初始化地图中心点
        });
        if (isGX) {
            setamap(amap)

        }
    }

    // 定位
    function positioning() {

        AMap.plugin('AMap.Geolocation', function () {
            
            var geolocation = new AMap.Geolocation({
                enableHighAccuracy: true, // 是否使用高精度定位，默认：true
                timeout: 10000, // 设置定位超时时间，默认：无穷大
                offset: [10, 20],  // 定位按钮的停靠位置的偏移量
                zoomToAccuracy: true,  //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                position: 'RB' //  定位按钮的排放位置,  RB表示右下
            })
            
            geolocation.getCurrentPosition(async function (status, result) {
                console.log(85);
                
                if (status === 'complete') {
                    console.log(result);
                    setpixel(new AMap.Pixel(result.position.lng, result.position.lat))

                    setPosition(() => {
                        return [result.position.lng, result.position.lat]
                        // return [pixel.x,pixel.y]
                    })
                } else {
                    console.log(result);
                }
            });
        })
    }
    // 设置标记点位置
    function setMarker(position: number[]) {
        if (pixel) {
            const lnglat = amap.containerToLngLat(pixel);
            position[0] = lnglat.lng
            position[1] = lnglat.lat
        }
        // 标记
        let marker = new AMap.Marker({
            position: position // 基点位置
        });
        marker.on('click', (e) => {
            console.log(e);
            if (props.clickMarker) {
                props.clickMarker(e)
            }

        })
        // 地图添加标记
        amap.add(marker);
    }
    return (
        <div id="mapContainer" style={{ width: '100%', height: '100%' }}></div>
    );
}
export default IvMap